<template>
    <div class="cityGroup">
         <van-index-bar :index-list="indexList">
            <!-- 热门城市 -->
            <van-index-anchor index="热门" />
            <template v-for="(city, index) in currentGroup?.hotCities" :key="index">
                <van-button 
                    round 
                    type="default" 
                    color="#ff9854" 
                    size="small" 
                    @click="getCity(city)"
                    style="margin:3px 10px; margin-right: 20px"
                    >{{city.cityName}}
                </van-button>
            </template>
            <!-- # A-Z -->
            <template v-for="(group, index) in currentGroup?.cities" :key="index">
                <van-index-anchor :index="group.group" />
                <template v-for="(city, cityIndex) in group?.cities" :key="cityIndex">
                    <van-cell :title="city.cityName" @click="getCity(city)" />
                </template>
            </template>
        </van-index-bar>
    </div>
</template>

<script setup>
import { computed } from "vue"
import { useRouter } from "vue-router"
import useCityStore from '@/stores/modules/city';


// 定义props
const props = defineProps({
  currentGroup: {
    type: Object,
    default: () => ({})
  }
})

// 索引字符列表
const indexList = computed(() => {
    const list = props.currentGroup.cities.map(item => item.group)
    list.unshift("#")
    return list
})

// 监听城市点击
const router = useRouter()
const cityStore = useCityStore()
const getCity = (city) => {
    // 获取当前城市： 1、通过全局事件   2、对象存储pinia
    cityStore.currentCity = city
    // 返回首页
    router.push("/home")
}
</script>

<style lang="less" scoped>

</style>